<template>
	<view>
		<swiper @change="swiperChange" :current="actIdx" class="swiper-cont" :indicator-dots="false" indicator-active-color="#FD7753">
			<swiper-item v-for="(item,index) in list">
				<view class="swiper-item">
					<image :src="`../../static/img/undraw_${index+1}.png`" mode=""></image>
					<view class="text-xl margin-tb">
						{{item.title}}
					</view>
					<view class="">
						{{item.description}}
					</view>
				</view>
				
			</swiper-item>
		</swiper>
		<view class="indicator-list">
			<view v-for="(_,index) in list" :class="index==actIdx?'active':''"></view>
		</view>
		
		<view class="padding flex justify-center">
			<button class="cu-btn" :class="(actIdx<list.length-1)?'bg-orange':'line-orange'" @click="handleChange">
				{{(actIdx<list.length-1)?'下一步':'开启求职之旅'}}
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
interface WelcomeType {
	title:string
	description:string
	imageUrl:string
}
const list:Array<WelcomeType> = [
  {
    "imageUrl": "https://example.com/job_guide1.jpg",
    "title": "得到你梦想的工作",
    "description": "个性化职位推荐与收藏功能，让机会触手可及"
  },
  {
    "imageUrl": "https://example.com/job_guide2.jpg",
    "title": "智能匹配心仪岗位",
    "description": "基于AI算法精准推送符合您职业规划的职位"
  },
  {
    "imageUrl": "https://example.com/job_guide3.jpg",
    "title": "一站式求职管家",
    "description": "从搜索到入职的全流程跟踪管理工具"
  }
]

const actIdx = ref(0)
const swiperChange = (ev:any)=>{
	console.log(ev);
	let {current} = ev.detail
	actIdx.value = current
}
const handleChange = ()=>{
	if(actIdx.value<list.length-1){
		actIdx.value++
	}else{
		uni.switchTab({
			url:'/pages/home/home'
		})
	}
}

// 记录用户首次访问
uni.setStorage({
	key:'first',
	data:true
})
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.swiper-cont{
	height: 750upx;
	width: 750upx;
	margin-top: 150upx;
}
.swiper-item{
	height: 80%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	view{
		width: 80%;
	}
	image{
		width: 400upx;
		height: 450upx;
		margin: 40upx 0;
	}
}	
.indicator-list{
	display: flex;
	justify-content: center;
	view{
		width:20upx;
		height: 20upx;
		background-color: #999;
		border-radius: 20upx;
		margin: 10upx;
		transition:all 0.5s;
	}
	.active{
		width: 60upx;
		background-color: #FD7753;
	}
}
.cu-btn{
	width: 300upx;
	margin:100upx 50upx;
}
</style>
